<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/common1.js"></script>
<script type="text/javascript" src="js/laypage/laypage.js"></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Notice/jBox.Notice.min.js"></script>
<link rel="stylesheet" href="js/laypage/skin/laypage.css"  media="all">
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Notice/jBox.Notice.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/NoticeFancy.css">
</head>
<body>
<div style="width:1400px;margin-left:20px;">


<table id="collectDetail" class="table table-striped">
			<tr align="left" style="background-color:#F5F5DC;">
				<th>所属</th>
				<th>商品名称</th>
				<th>商品图片</th>
				<th>商品价格</th>
				<th>商品备注</th>
				<th>上架时间</th>
				<th>收藏时间</th>
				<th>商品状态</th>
				<th>操作</th>
			</tr>
			<tr align="left" v-for="coll in collList">
			    
			    <td>{{coll.goods.goodsAllClass}}</td>
			    <td>{{coll.goods.gname}}</td>
			    <td>
			    <div class="col-xs-6 col-md-3" style="width:100px;">
			    <div class="thumbnail">
			    <img :src="coll.goods.gphoto" alt="">
			    </div>
			    </div>
			    </td>
			    
			    <td>{{coll.goods.gprice}}</td>
			    <td>{{coll.goods.gdetail}}</td>
			    <td>{{coll.goods.gtime}}</td>
			    <td>{{coll.cdTime}}</td>
			    <td>
			    <div v-if=coll.goods.status==1>
			    <p class="text-warning">已卖出</p>
			    </div>
			    <div v-if="coll.goods.status==-1">
			    <p class="text-danger">未卖出</p>
			    </div>
			    </td>
			    
			    <td>
			    <button type="button" class="btn btn-warning" :value="coll.cdId" onclick="cancelCollect(this)">取消收藏</button>
			    <div v-if="coll.goods.status==-1">
			    <!-- 将该商品的id付给此button的value值 -->
			    <button type="button" class="btn btn-danger" :value="coll.goods.gid" onclick="JumpToGoodsDetail(this)">去购买</button> 
			    </div>
			    </td>
			</tr>
		
</table>
<div id="laypage"></div>
</div>
</body>
<script type="text/javascript">
var vue=new Vue({
	el:'#collectDetail',
	data:{
		collList:'',
	}
});
//定义一个当前页变量供其他方法使用
var curr=1;
//内容分页展示
function showColl(currentPage){
	    curr=currentPage;
		$.ajax({
			 url:'queryCollectDetail.do',
			 type:'post',
			 data:{currentPage:currentPage,pageSize:2},
			 dataType:'json',
			 success:function(result){
				 console.log(result.pages);
				 var collList=result.collList;
				 vue.collList=result.collList;
				 laypage({
						cont:$("#laypage"),//容器
						pages:result.pages,//总页数
						curr:currentPage,//当前页
						//limit:5,分页数
						skin:'molv',
						skip:true,
						last:'尾页',
						groups:5,//多少页分组
						jump:function(obj,frist){
							if(!frist){
								showColl(obj.curr);
							}
						}
					});
			 }
		});
	};
$(function(){
	showColl(1); 
});
//跳转到商品详情页面
function JumpToGoodsDetail(evt){
	var gid=$(evt).val();
	windows.location.herf="?gid="+gid;
}
//取消收藏
function cancelCollect(evt){
	var cdId=$(evt).val();
	$.ajax({
		url:'deleteCollectDetail.do',
		data:{cdId:cdId},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				new jBox('Notice', {
					animation: 'flip',
				    content: '已取消',
				    color: 'blue'
				});
				showColl(curr); 
			}
		}
	});
}
</script>
</html>